All files / web/src/app/toys/euclid/creations/[id] page.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { notFound } from 'next/navigation'
import { AppNavBar } from '@/components/AppNavBar'
import { EuclidCanvas } from '@/components/toys/euclid/EuclidCanvas'
import { db } from '@/db'
import * as schema from '@/db/schema'
import { eq } from 'drizzle-orm'
import { TrackSeen } from './TrackSeen'

interface Props {
  params: Promise<{ id: string }>
}

export default async function CreationPage({ params }: Props) {
  const { id } = await params
  const creation = await db
    .select()
    .from(schema.euclidCreations)
    .where(eq(schema.euclidCreations.id, id))
    .get()

  if (!creation) notFound()

  const { givenPoints, actions } = creation.data

  return (
    <div
      data-component="euclid-creation-page"
      style={{
        width: '100vw',
        height: '100dvh',
        overflow: 'hidden',
        background: '#FAFAF0',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <AppNavBar
        navSlot={
          <a
            href="/toys/euclid/playground"
            style={{
              fontSize: '14px',
              fontWeight: 600,
              color: 'rgba(55, 65, 81, 1)',
              textDecoration: 'none',
            }}
          >
            ← Playground
          </a>
        }
      />
      {/* Tracks this ID in localStorage under euclid_seen_ids */}
      <TrackSeen id={id} ownerId={creation.userId} />
      <div
        style={{
          flex: 1,
          minHeight: 0,
          paddingTop: 'var(--app-nav-height)',
          touchAction: 'none',
          position: 'relative',
        }}
      >
        <EuclidCanvas
          propositionId={0}
          playgroundMode
          initialActions={actions}
          initialGivenPoints={givenPoints}
        />
      </div>
    </div>
  )
}